<!DOCTYPE html>
<html>
<include file="Public:header" />
<link href="__ACSS__/dialog.css" rel="stylesheet">
<link rel="stylesheet" href="__ACSS__/plugins/zTree/zTreeStyle.css" type="text/css">
<style>
.animated {z-index: 0;}

.ztree * {font-size: 10pt;}
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree li a {width:100%;height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
.ztree li a span.button.switch {visibility:hidden}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
.ztree li span {line-height:30px;}
.ztree li span.button {margin-top: -7px;}
.ztree li span.button.switch {width: 16px;height: 16px; }
.ztree li a.level0 span {font-size: 140%;font-weight:bold; width:5px;}
.ztree li span.button {background-image:url("__ACSS__/plugins/zTree/img/left_menuForOutLook.png"); *background-image:url("__ACSS__/plugins/zTree/img/left_menuForOutLook.gif")}
.ztree li span.button.switch.level0 {width: 0; height:0}
.ztree li span.button.switch.level1 {width: 0; height:0}
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: -18px 0;}
.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
		<div class="form-group">
			<label class="col-sm-2 control-label">类别：</label>
			<div class="col-sm-10" style="padding-left:0;">
				<select name="shop_id" class="form-control" datatype="*" id="shop_id">
					<option value="0">请选择超市</option>
					<foreach name="shop_list" item="shop_list">
						<option value="<{$shop_list.id}>"><{$shop_list.name}></option>
					</foreach>
				</select>
			</div>
			<br/>
			<div class="clearfix"></div>
		</div>

		<input class="hide" id="meetingplace_id" value="<{$meetingplace_id}>"/>
    	<input class="hide" id="seq_data"/>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
                    	<div role="alert" class="alert alert-info"><strong>点击可进行拖动排序</strong></div>
                    	<ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bar">
    	<div class="clearfix">
			<button type="button" id="submit-btn" class="btn btn-success btn-block">提交</button>
		</div>
    </div>
</body>
<!-- 全局js -->
<include file="Public:foot" />
<script type="text/javascript" src="__AJSPLUGINS__/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="__AJSPLUGINS__/zTree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
var setting = {
	edit: {
		enable: true,
		showRemoveBtn: false,
		showRenameBtn: false,
		drag: {
			prev: true,
			next: true,
			inner: false
		}
	},
	data: {
		keep: {
			parent: false,
			leaf: true
		},
		simpleData: {
			enable: true
		}
	},
	callback: {
		beforeDrag: beforeDrag,
		beforeDrop: beforeDrop,
		onDrop: onDrop
	}
};

var zNodes = "";

//拖动开始
function beforeDrag(treeId, treeNodes) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	if(treeNodes[0].isParent) {
		zTree.expandAll(false);
	}
	return true;
}
//拖动结束之前
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
	if(treeNodes[0].isParent) {//拖动的父节点
		if(!targetNode.isParent) {
			layer.msg("请选择正确的类别拖动！", {time: 1000});
			return false;
		}
	}else{//拖动的子节点
		if(treeNodes[0].pId != targetNode.pId) {
			layer.msg("请选择正确的类别拖动！", {time: 1000});
			return false;
		}
	}
	return true;
}
//拖动结束
function onDrop(treeId, treeNodes, targetNode, moveType) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	zTree.expandAll(true);
	getAllData();
}
//获取拖动成功后的数据
function getAllData() {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	var nodes = zTree.getNodes();
	var arr = [];
	for(var j=0; j<nodes.length; j++){
		for(var k=0; k<nodes[j].children.length; k++) {
			arr.push(nodes[j].children[k].id);
		}
	}
	$("#seq_data").val(arr);
}

//获取节点数据
function getNodes(shop_id,name){
	var meetingplace_id = $("#meetingplace_id").val();
	$.ajax({
		url:"__URL__/getNodes",
		type:"post",
		data:{'shop_id':shop_id,'name':name,'id':meetingplace_id},
		success:function(json){
			var data = eval("("+json+")");
			if(data.status == 1){
				$.fn.zTree.init($("#treeDemo"), setting, data.data);
				getAllData();
			}
		}
	})
}
$("#submit-btn").click(function() {
	var index = parent.layer.getFrameIndex(window.name);
	var layerIndex = layer.load(2, {
	    shade: [0.3,'#FFF']
	});
	$.ajax({
		url:"__URL__/updateProductSeq",
		type:"post",
		data:{'seq':$("#seq_data").val().split(',')},
		success:function(json){
			var data = eval("("+json+")");
			if(data.status == 1){
				layer.msg(data.info, {time: 1000});
				window.parent.$('#table_list').trigger("reloadGrid");
			}else{
				layer.msg(data.info, {time: 1000});
				window.location.reload();
			}
			layer.close(layerIndex);
			parent.layer.close(index);
		}
	})
})
$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	$("#shop_id").change(function(){
		getNodes($(this).val(),$(this).find(":selected").text());
	})
});
</script>
</html>